<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./static/favicon.png"><meta name="description" content="LittleJS is a lightweight HTML5 game engine with fast WebGL rendering, physics, particles, sound, and more!"><meta name="keywords" content="javascript, game engine, html5, webgl, 2d, game development, indie games"><meta name="author" content="Frank Force"><meta property="og:title" content="LittleJS - The Tiny JavaScript Game Engine"><meta property="og:description" content="Lightweight HTML5 game engine with WebGL rendering, physics, and sound"><meta property="og:type" content="website"><title>Namespace: Draw</title><!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]--><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(baseURL=(baseURL="https://killedbyapixel.github.io/LittleJS/docs/").replace(/https?:\/\//i,"")).substr(baseURL.indexOf("/"))</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="dark"><div class="sidebar-container"><div class="sidebar" id="sidebar"><a href="/" class="sidebar-title sidebar-title-anchor">LittleJS - The Tiny JavaScript Game Engine That Can!</a><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="Audio.Sound.html">Sound</a></div><div class="sidebar-section-children"><a href="Audio.SoundInstance.html">SoundInstance</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dDistanceJoint.html">Box2dDistanceJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dFrictionJoint.html">Box2dFrictionJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dGearJoint.html">Box2dGearJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dJoint.html">Box2dJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dKiematicObject.html">Box2dKiematicObject</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dMotorJoint.html">Box2dMotorJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dObject.html">Box2dObject</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPinJoint.html">Box2dPinJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPlugin.html">Box2dPlugin</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPrismaticJoint.html">Box2dPrismaticJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPulleyJoint.html">Box2dPulleyJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dRevoluteJoint.html">Box2dRevoluteJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dRopeJoint.html">Box2dRopeJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dStaticObject.html">Box2dStaticObject</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dTargetJoint.html">Box2dTargetJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dWeldJoint.html">Box2dWeldJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dWheelJoint.html">Box2dWheelJoint</a></div><div class="sidebar-section-children"><a href="Box2dRaycastResult.html">Box2dRaycastResult</a></div><div class="sidebar-section-children"><a href="Draw.FontImage.html">FontImage</a></div><div class="sidebar-section-children"><a href="Draw.TextureInfo.html">TextureInfo</a></div><div class="sidebar-section-children"><a href="Draw.TileInfo.html">TileInfo</a></div><div class="sidebar-section-children"><a href="Engine.Color.html">Color</a></div><div class="sidebar-section-children"><a href="Engine.EngineObject.html">EngineObject</a></div><div class="sidebar-section-children"><a href="Engine.Particle.html">Particle</a></div><div class="sidebar-section-children"><a href="Engine.ParticleEmitter.html">ParticleEmitter</a></div><div class="sidebar-section-children"><a href="Engine.RandomGenerator.html">RandomGenerator</a></div><div class="sidebar-section-children"><a href="Engine.Timer.html">Timer</a></div><div class="sidebar-section-children"><a href="Engine.Vector2.html">Vector2</a></div><div class="sidebar-section-children"><a href="Medals.Medal.html">Medal</a></div><div class="sidebar-section-children"><a href="Newgrounds.NewgroundsMedal.html">NewgroundsMedal</a></div><div class="sidebar-section-children"><a href="Newgrounds.NewgroundsPlugin.html">NewgroundsPlugin</a></div><div class="sidebar-section-children"><a href="PostProcess.PostProcessPlugin.html">PostProcessPlugin</a></div><div class="sidebar-section-children"><a href="TileLayers.Box2dTileLayer.html">Box2dTileLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.CanvasLayer.html">CanvasLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.TileCollisionLayer.html">TileCollisionLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.TileLayer.html">TileLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.TileLayerData.html">TileLayerData</a></div><div class="sidebar-section-children"><a href="UISystem.UIButton.html">UIButton</a></div><div class="sidebar-section-children"><a href="UISystem.UICheckbox.html">UICheckbox</a></div><div class="sidebar-section-children"><a href="UISystem.UIObject.html">UIObject</a></div><div class="sidebar-section-children"><a href="UISystem.UIScrollbar.html">UIScrollbar</a></div><div class="sidebar-section-children"><a href="UISystem.UISystemPlugin.html">UISystemPlugin</a></div><div class="sidebar-section-children"><a href="UISystem.UIText.html">UIText</a></div><div class="sidebar-section-children"><a href="UISystem.UITile.html">UITile</a></div><div class="sidebar-section-children"><a href="UISystem.UIVideo.html">UIVideo</a></div><div class="sidebar-section-children"><a href="ZzFXM.ZzFXMusic.html">ZzFXMusic</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-namespaces"><div>Namespaces</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="Audio.html">Audio</a></div><div class="sidebar-section-children"><a href="Box2D.html">Box2D</a></div><div class="sidebar-section-children"><a href="Debug.html">Debug</a></div><div class="sidebar-section-children"><a href="Draw.html">Draw</a></div><div class="sidebar-section-children"><a href="DrawUtilities.html">DrawUtilities</a></div><div class="sidebar-section-children"><a href="Engine.html">Engine</a></div><div class="sidebar-section-children"><a href="Input.html">Input</a></div><div class="sidebar-section-children"><a href="Math.html">Math</a></div><div class="sidebar-section-children"><a href="Medals.html">Medals</a></div><div class="sidebar-section-children"><a href="Newgrounds.html">Newgrounds</a></div><div class="sidebar-section-children"><a href="PostProcess.html">PostProcess</a></div><div class="sidebar-section-children"><a href="Random.html">Random</a></div><div class="sidebar-section-children"><a href="Settings.html">Settings</a></div><div class="sidebar-section-children"><a href="TileLayers.html">TileLayers</a></div><div class="sidebar-section-children"><a href="UISystem.html">UISystem</a></div><div class="sidebar-section-children"><a href="Utilities.html">Utilities</a></div><div class="sidebar-section-children"><a href="WebGL.html">WebGL</a></div><div class="sidebar-section-children"><a href="ZzFXM.html">ZzFXM</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"><div class="navbar-item"><a id="" href="https://github.com/KilledByAPixel/LittleJS" target="_blank">GitHub</a></div><div class="navbar-item"><a id="" href="https://killedbyapixel.github.io/LittleJS/examples/" target="_blank">Examples</a></div><div class="navbar-item"><a id="" href="https://github.com/KilledByAPixel/LittleJS/blob/main/FAQ.md" target="_blank">FAQ</a></div></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section><header><h1 id="Draw-title" class="has-anchor">Draw</h1></header><article><div class="container-overview"><div class="description"><p>LittleJS Drawing System</p><ul><li>Hybrid system with both Canvas2D and WebGL available</li><li>Super fast tile sheet rendering with WebGL</li><li>Can apply rotation, mirror, color and additive color</li><li>Font rendering system with built in engine font</li><li>Many useful utility functions</li></ul><p>LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL. There are 3 canvas/contexts available to draw to... mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here. glCanvas - Used by the accelerated WebGL batch rendering system.</p><p>The WebGL rendering system is very fast with some caveats...</p><ul><li>Switching blend modes (additive) or textures causes another draw call which is expensive in excess</li><li>Group additive rendering together using renderOrder to mitigate this issue</li></ul><p>The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line1">line 1</a></li></ul></dd></div></dl></div><h2 id="classes" class="subsection-title has-anchor">Classes</h2><dl><dt><a href="Draw.FontImage.html">FontImage</a></dt><dd></dd><dt><a href="Draw.TextureInfo.html">TextureInfo</a></dt><dd></dd><dt><a href="Draw.TileInfo.html">TileInfo</a></dt><dd></dd></dl><h2 id="members" class="subsection-title has-anchor">Members</h2><h3 class="name has-anchor" id=".canvasClearColor"><span class="type-signature">(static) </span>canvasClearColor<span class="type-signature"> :Color</span></h3><div class="description"><p>Color to clear the canvas to before render, does not clear if alpha is 0</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Color</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineSettings.js.html">src/engineSettings.js</a>, <a href="src_engineSettings.js.html#line43">line 43</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawContext"><span class="type-signature">(static) </span>drawContext<span class="type-signature"> :CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D</span></h3><div class="description"><p>The default 2d context to use for drawing, usually mainContext</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line37">line 37</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawCount"><span class="type-signature">(static) </span>drawCount<span class="type-signature"> :number</span></h3><div class="description"><p>Keeps track of how many draw calls there were each frame for debugging</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">number</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line72">line 72</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".engineFontImage"><span class="type-signature">(static) </span>engineFontImage<span class="type-signature"> :FontImage</span></h3><div class="description"><p>Engine font image, 8x8 font provided by the engine</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">FontImage</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line1003">line 1003</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".mainCanvas"><span class="type-signature">(static) </span>mainCanvas<span class="type-signature"> :HTMLCanvasElement</span></h3><div class="description"><p>The primary 2D canvas visible to the user</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">HTMLCanvasElement</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line27">line 27</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".mainCanvasSize"><span class="type-signature">(static) </span>mainCanvasSize<span class="type-signature"> :Vector2</span></h3><div class="description"><p>The size of the main canvas (and other secondary canvases)</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Vector2</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line62">line 62</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".mainContext"><span class="type-signature">(static) </span>mainContext<span class="type-signature"> :CanvasRenderingContext2D</span></h3><div class="description"><p>2d context for mainCanvas</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">CanvasRenderingContext2D</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line32">line 32</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".textureInfos"><span class="type-signature">(static) </span>textureInfos<span class="type-signature"> :Array.&lt;TextureInfo></span></h3><div class="description"><p>Array containing texture info for batch rendering system</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;TextureInfo></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line67">line 67</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".workCanvas"><span class="type-signature">(static) </span>workCanvas<span class="type-signature"> :OffscreenCanvas</span></h3><div class="description"><p>Offscreen canvas that can be used for image processing</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">OffscreenCanvas</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line42">line 42</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".workContext"><span class="type-signature">(static) </span>workContext<span class="type-signature"> :OffscreenCanvasRenderingContext2D</span></h3><div class="description"><p>Offscreen canvas that can be used for image processing</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">OffscreenCanvasRenderingContext2D</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line47">line 47</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".workReadCanvas"><span class="type-signature">(static) </span>workReadCanvas<span class="type-signature"> :OffscreenCanvas</span></h3><div class="description"><p>Offscreen canvas with willReadFrequently that can be used for image processing</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">OffscreenCanvas</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line52">line 52</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".workReadContext"><span class="type-signature">(static) </span>workReadContext<span class="type-signature"> :OffscreenCanvasRenderingContext2D</span></h3><div class="description"><p>Offscreen canvas with willReadFrequently that can be used for image processing</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">OffscreenCanvasRenderingContext2D</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line57">line 57</a></li></ul></dd></div></dl><h2 id="methods" class="subsection-title has-anchor">Methods</h2><h3 class="name has-anchor" id="draw"><span class="type-signature">(static) </span>CanvasLayer#draw<span class="signature">(pos, size<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, mirror<span class="signature-attributes">opt</span>, additiveColor<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw this canvas layer centered in world space, with color applied if using WebGL</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Center in world space</p></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Size in world space</p></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Color to modulate with</p></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>Angle to rotate by</p></td></tr><tr><td class="name"><code>mirror</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"><p>If true image is flipped along the Y axis</p></td></tr><tr><td class="name"><code>additiveColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Additive color to be applied if any</p></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"><p>If true the pos and size are in screen space</p></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Canvas 2D context to draw to</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineTileLayer.js.html">src/engineTileLayer.js</a>, <a href="src_engineTileLayer.js.html#line234">line 234</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".combineCanvases"><span class="type-signature">(static) </span>combineCanvases<span class="signature">()</span></h3><div class="description"><p>Combines LittleJS canvases onto the main canvas This is necessary for things like screenshots and video</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line888">line 888</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawCanvas2D"><span class="type-signature">(static) </span>drawCanvas2D<span class="signature">(pos, size, angle, mirror<span class="signature-attributes">opt</span>, drawFunction<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw directly to a 2d canvas context in world space</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>mirror</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"></td></tr><tr><td class="name"><code>drawFunction</code></td><td class="type"><span class="param-type">Canvas2DDrawFunction</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default">drawContext</td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line628">line 628</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawCircle"><span class="type-signature">(static) </span>drawCircle<span class="signature">(pos, size<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, lineWidth<span class="signature-attributes">opt</span>, lineColor<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw colored circle using passed in point</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">1</td><td class="description last"><p>Diameter</p></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>lineWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>lineColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">BLACK</td><td class="description last"></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line607">line 607</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawEllipse"><span class="type-signature">(static) </span>drawEllipse<span class="signature">(pos, size<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, lineWidth<span class="signature-attributes">opt</span>, lineColor<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw colored ellipse using passed in point</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2(1)</td><td class="description last"><p>Width and height diameter</p></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>lineWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>lineColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">BLACK</td><td class="description last"></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line560">line 560</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawImageColor"><span class="type-signature">(static) </span>drawImageColor<span class="signature">(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor<span class="signature-attributes">opt</span>, bleed<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Helper function to draw an image with color and additive color applied This is slower then normal drawImage when color is applied</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>image</code></td><td class="type"><span class="param-type">HTMLImageElement</span> |<wbr> <span class="param-type">OffscreenCanvas</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>sx</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>sy</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>sWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>sHeight</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>dx</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>dy</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>dWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>dHeight</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>additiveColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>bleed</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>How many pixels to shrink the source, used to fix bleeding</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line915">line 915</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawLine"><span class="type-signature">(static) </span>drawLine<span class="signature">(posA, posB, width<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, pos<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw colored line between two points</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>posA</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>posB</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>width</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0.1</td><td class="description last"></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2()</td><td class="description last"><p>Offset to apply</p></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>Angle to rotate by</p></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line460">line 460</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawLineList"><span class="type-signature">(static) </span>drawLineList<span class="signature">(points, width<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, wrap<span class="signature-attributes">opt</span>, pos<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw connected lines between a series of points</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>points</code></td><td class="type"><span class="param-type">Array.&lt;Vector2></span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>width</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0.1</td><td class="description last"></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>wrap</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"><p>Should the last point connect to the first?</p></td></tr><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2()</td><td class="description last"><p>Offset to apply</p></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>Angle to rotate by</p></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line412">line 412</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawPoly"><span class="type-signature">(static) </span>drawPoly<span class="signature">(points, color<span class="signature-attributes">opt</span>, lineWidth<span class="signature-attributes">opt</span>, lineColor<span class="signature-attributes">opt</span>, pos<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw colored polygon using passed in points</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>points</code></td><td class="type"><span class="param-type">Array.&lt;Vector2></span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Array of Vector2 points</p></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>lineWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>lineColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">BLACK</td><td class="description last"></td></tr><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2()</td><td class="description last"><p>Offset to apply</p></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>Angle to rotate by</p></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line510">line 510</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawRect"><span class="type-signature">(static) </span>drawRect<span class="signature">(pos, size<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw colored rect centered on pos</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2(1)</td><td class="description last"></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line333">line 333</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawRectGradient"><span class="type-signature">(static) </span>drawRectGradient<span class="signature">(pos, size<span class="signature-attributes">opt</span>, colorTop<span class="signature-attributes">opt</span>, colorBottom<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw a rect centered on pos with a gradient from top to bottom</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2(1)</td><td class="description last"></td></tr><tr><td class="name"><code>colorTop</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>colorBottom</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">BLACK</td><td class="description last"></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line348">line 348</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawRegularPoly"><span class="type-signature">(static) </span>drawRegularPoly<span class="signature">(pos, size<span class="signature-attributes">opt</span>, sides<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, lineWidth<span class="signature-attributes">opt</span>, lineColor<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw colored regular polygon using passed in number of sides</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2(1)</td><td class="description last"></td></tr><tr><td class="name"><code>sides</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">3</td><td class="description last"></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>lineWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>lineColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">BLACK</td><td class="description last"></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line483">line 483</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawText"><span class="type-signature">(static) </span>drawText<span class="signature">(text, pos, size<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, lineWidth<span class="signature-attributes">opt</span>, lineColor<span class="signature-attributes">opt</span>, textAlign<span class="signature-attributes">opt</span>, font<span class="signature-attributes">opt</span>, fontStyle<span class="signature-attributes">opt</span>, maxWidth<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw text on main canvas in world space Automatically splits new lines into rows</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>text</code></td><td class="type"><span class="param-type">string</span> |<wbr> <span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">1</td><td class="description last"></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>lineWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>lineColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">BLACK</td><td class="description last"></td></tr><tr><td class="name"><code>textAlign</code></td><td class="type"><span class="param-type">CanvasTextAlign</span></td><td class="attributes">&lt;optional><br></td><td class="default">'center'</td><td class="description last"></td></tr><tr><td class="name"><code>font</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="default">fontDefault</td><td class="description last"></td></tr><tr><td class="name"><code>fontStyle</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>maxWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default">drawContext</td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line667">line 667</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawTextScreen"><span class="type-signature">(static) </span>drawTextScreen<span class="signature">(text, pos, size, color<span class="signature-attributes">opt</span>, lineWidth<span class="signature-attributes">opt</span>, lineColor<span class="signature-attributes">opt</span>, textAlign<span class="signature-attributes">opt</span>, font<span class="signature-attributes">opt</span>, fontStyle<span class="signature-attributes">opt</span>, maxWidth<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw text in screen space Automatically splits new lines into rows</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>text</code></td><td class="type"><span class="param-type">string</span> |<wbr> <span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"></td></tr><tr><td class="name"><code>lineWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>lineColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">BLACK</td><td class="description last"></td></tr><tr><td class="name"><code>textAlign</code></td><td class="type"><span class="param-type">CanvasTextAlign</span></td><td class="attributes">&lt;optional><br></td><td class="default">center</td><td class="description last"></td></tr><tr><td class="name"><code>font</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="default">fontDefault</td><td class="description last"></td></tr><tr><td class="name"><code>fontStyle</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>maxWidth</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default">drawContext</td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line694">line 694</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".drawTile"><span class="type-signature">(static) </span>drawTile<span class="signature">(pos, size<span class="signature-attributes">opt</span>, tileInfo<span class="signature-attributes">opt</span>, color<span class="signature-attributes">opt</span>, angle<span class="signature-attributes">opt</span>, mirror<span class="signature-attributes">opt</span>, additiveColor<span class="signature-attributes">opt</span>, useWebGL<span class="signature-attributes">opt</span>, screenSpace<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Draw textured tile centered in world space</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Center of the tile in world space</p></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes">&lt;optional><br></td><td class="default">vec2(1)</td><td class="description last"><p>Size of the tile in world space</p></td></tr><tr><td class="name"><code>tileInfo</code></td><td class="type"><span class="param-type">TileInfo</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Tile info to use, untextured if undefined</p></td></tr><tr><td class="name"><code>color</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default">WHITE</td><td class="description last"><p>Color to modulate with</p></td></tr><tr><td class="name"><code>angle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>Angle to rotate by</p></td></tr><tr><td class="name"><code>mirror</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Is image flipped along the Y axis?</p></td></tr><tr><td class="name"><code>additiveColor</code></td><td class="type"><span class="param-type">Color</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Additive color to be applied if any</p></td></tr><tr><td class="name"><code>useWebGL</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">glEnable</td><td class="description last"><p>Use accelerated WebGL rendering?</p></td></tr><tr><td class="name"><code>screenSpace</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"><p>Are the pos and size are in screen space?</p></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Canvas 2D context to draw to</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line251">line 251</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".getCameraSize"><span class="type-signature">(static) </span>getCameraSize<span class="signature">()</span><span class="type-signature"> &rarr; {Vector2}</span></h3><div class="description"><p>Get the size of the camera window in world space</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line838">line 838</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Vector2</span></dd></dl></div><h3 class="name has-anchor" id=".isFullscreen"><span class="type-signature">(static) </span>isFullscreen<span class="signature">()</span><span class="type-signature"> &rarr; {boolean}</span></h3><div class="description"><p>Returns true if fullscreen mode is active</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line973">line 973</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">boolean</span></dd></dl></div><h3 class="name has-anchor" id=".isOnScreen"><span class="type-signature">(static) </span>isOnScreen<span class="signature">(pos, size)</span><span class="type-signature"> &rarr; {boolean}</span></h3><div class="description"><p>Check if a box, point, or circle is on screen with a circle test If size is a Vector2, uses the length as diameter This can be used to cull offscreen objects from render or update</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="default"></td><td class="description last"><p>world space position</p></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span> |<wbr> <span class="param-type">number</span></td><td class="default">0</td><td class="description last"><p>world space size or diameter</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line847">line 847</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">boolean</span></dd></dl></div><h3 class="name has-anchor" id=".screenToWorld"><span class="type-signature">(static) </span>screenToWorld<span class="signature">(screenPos)</span><span class="type-signature"> &rarr; {Vector2}</span></h3><div class="description"><p>Convert from screen to world space coordinates</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>screenPos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line736">line 736</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Vector2</span></dd></dl></div><h3 class="name has-anchor" id=".screenToWorldDelta"><span class="type-signature">(static) </span>screenToWorldDelta<span class="signature">(screenDelta)</span><span class="type-signature"> &rarr; {Vector2}</span></h3><div class="description"><p>Convert from screen to world space coordinates for a directional vector (no translation)</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>screenDelta</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line780">line 780</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Vector2</span></dd></dl></div><h3 class="name has-anchor" id=".screenToWorldTransform"><span class="type-signature">(static) </span>screenToWorldTransform<span class="signature">(screenPos, screenSize, screenAngle<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Convert screen space transform to world space</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>screenPos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>screenSize</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr><tr><td class="name"><code>screenAngle</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line822">line 822</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong></div><h3 class="name has-anchor" id=".setBlendMode"><span class="type-signature">(static) </span>setBlendMode<span class="signature">(additive<span class="signature-attributes">opt</span>, context<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Enable normal or additive blend mode</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>additive</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"></td></tr><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line879">line 879</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".setCursor"><span class="type-signature">(static) </span>setCursor<span class="signature">(cursorStyle<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Set the cursor style</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>cursorStyle</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="default">auto</td><td class="description last"><p>CSS cursor style (auto, none, crosshair, etc)</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line992">line 992</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".tile"><span class="type-signature">(static) </span>tile<span class="signature">(index<span class="signature-attributes">opt</span>, size<span class="signature-attributes">opt</span>, texture<span class="signature-attributes">opt</span>, padding<span class="signature-attributes">opt</span>, bleed<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {TileInfo}</span></h3><div class="description"><p>Create a tile info object using a grid based system</p><ul><li>This can take vecs or floats for easier use and conversion</li><li>If an index is passed in, the tile size and index will determine the position</li></ul></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>index</code></td><td class="type"><span class="param-type">Vector2</span> |<wbr> <span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>Index of the tile in 1d or 2d form</p></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">Vector2</span> |<wbr> <span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Size of tile in pixels</p></td></tr><tr><td class="name"><code>texture</code></td><td class="type"><span class="param-type">TextureInfo</span> |<wbr> <span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default">0</td><td class="description last"><p>Texture index or info to use</p></td></tr><tr><td class="name"><code>padding</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>How many pixels padding around tiles</p></td></tr><tr><td class="name"><code>bleed</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>How many pixels smaller to draw tiles</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line92">line 92</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">TileInfo</span></dd></dl></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Example</strong><div class="rel"><pre class="prettyprint"><code>tile(2)                       // a tile at index 2 using the default tile size of 16tile(5, 8)                    // a tile at index 5 using a tile size of 8tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)</code></pre></div></div><h3 class="name has-anchor" id=".toggleFullscreen"><span class="type-signature">(static) </span>toggleFullscreen<span class="signature">()</span></h3><div class="description"><p>Toggle fullscreen mode</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line977">line 977</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".worldToScreen"><span class="type-signature">(static) </span>worldToScreen<span class="signature">(worldPos)</span><span class="type-signature"> &rarr; {Vector2}</span></h3><div class="description"><p>Convert from world to screen space coordinates</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>worldPos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line756">line 756</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Vector2</span></dd></dl></div><h3 class="name has-anchor" id=".worldToScreenDelta"><span class="type-signature">(static) </span>worldToScreenDelta<span class="signature">(worldDelta)</span><span class="type-signature"> &rarr; {Vector2}</span></h3><div class="description"><p>Convert from screen to world space coordinates for a directional vector (no translation)</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>worldDelta</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line800">line 800</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Vector2</span></dd></dl></div><h2 id="type-definitions" class="subsection-title has-anchor">Type Definitions</h2><h3 class="name has-anchor" id=".Canvas2DDrawFunction"><span class="type-signature"></span>Canvas2DDrawFunction<span class="signature">(context)</span></h3><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>context</code></td><td class="type"><span class="param-type">CanvasRenderingContext2D</span> |<wbr> <span class="param-type">OffscreenCanvasRenderingContext2D</span></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineDraw.js.html">src/engineDraw.js</a>, <a href="src_engineDraw.js.html#line613">line 613</a></li></ul></dd></div></dl><h3 class="name has-anchor" id=".LineTestFunction"><span class="type-signature"></span>LineTestFunction<span class="signature">(pos)</span></h3><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>pos</code></td><td class="type"><span class="param-type">Vector2</span></td><td class="description last"></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="src_engineMath.js.html">src/engineMath.js</a>, <a href="src_engineMath.js.html#line283">line 283</a></li></ul></dd></div></dl></article></section><footer class="footer" id="PeOAagUepe"><div class="wrapper"><a href="https://github.com/KilledByAPixel/LittleJS">LittleJS - MIT License - Copyright 2021 Frank Force</a></div></footer></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><a href="/" class="sidebar-title sidebar-title-anchor">LittleJS - The Tiny JavaScript Game Engine That Can!</a><div class="mobile-nav-links"><div class="navbar-item"><a id="" href="https://github.com/KilledByAPixel/LittleJS" target="_blank">GitHub</a></div><div class="navbar-item"><a id="" href="https://killedbyapixel.github.io/LittleJS/examples/" target="_blank">Examples</a></div><div class="navbar-item"><a id="" href="https://github.com/KilledByAPixel/LittleJS/blob/main/FAQ.md" target="_blank">FAQ</a></div></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="Audio.Sound.html">Sound</a></div><div class="sidebar-section-children"><a href="Audio.SoundInstance.html">SoundInstance</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dDistanceJoint.html">Box2dDistanceJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dFrictionJoint.html">Box2dFrictionJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dGearJoint.html">Box2dGearJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dJoint.html">Box2dJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dKiematicObject.html">Box2dKiematicObject</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dMotorJoint.html">Box2dMotorJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dObject.html">Box2dObject</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPinJoint.html">Box2dPinJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPlugin.html">Box2dPlugin</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPrismaticJoint.html">Box2dPrismaticJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dPulleyJoint.html">Box2dPulleyJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dRevoluteJoint.html">Box2dRevoluteJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dRopeJoint.html">Box2dRopeJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dStaticObject.html">Box2dStaticObject</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dTargetJoint.html">Box2dTargetJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dWeldJoint.html">Box2dWeldJoint</a></div><div class="sidebar-section-children"><a href="Box2D.Box2dWheelJoint.html">Box2dWheelJoint</a></div><div class="sidebar-section-children"><a href="Box2dRaycastResult.html">Box2dRaycastResult</a></div><div class="sidebar-section-children"><a href="Draw.FontImage.html">FontImage</a></div><div class="sidebar-section-children"><a href="Draw.TextureInfo.html">TextureInfo</a></div><div class="sidebar-section-children"><a href="Draw.TileInfo.html">TileInfo</a></div><div class="sidebar-section-children"><a href="Engine.Color.html">Color</a></div><div class="sidebar-section-children"><a href="Engine.EngineObject.html">EngineObject</a></div><div class="sidebar-section-children"><a href="Engine.Particle.html">Particle</a></div><div class="sidebar-section-children"><a href="Engine.ParticleEmitter.html">ParticleEmitter</a></div><div class="sidebar-section-children"><a href="Engine.RandomGenerator.html">RandomGenerator</a></div><div class="sidebar-section-children"><a href="Engine.Timer.html">Timer</a></div><div class="sidebar-section-children"><a href="Engine.Vector2.html">Vector2</a></div><div class="sidebar-section-children"><a href="Medals.Medal.html">Medal</a></div><div class="sidebar-section-children"><a href="Newgrounds.NewgroundsMedal.html">NewgroundsMedal</a></div><div class="sidebar-section-children"><a href="Newgrounds.NewgroundsPlugin.html">NewgroundsPlugin</a></div><div class="sidebar-section-children"><a href="PostProcess.PostProcessPlugin.html">PostProcessPlugin</a></div><div class="sidebar-section-children"><a href="TileLayers.Box2dTileLayer.html">Box2dTileLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.CanvasLayer.html">CanvasLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.TileCollisionLayer.html">TileCollisionLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.TileLayer.html">TileLayer</a></div><div class="sidebar-section-children"><a href="TileLayers.TileLayerData.html">TileLayerData</a></div><div class="sidebar-section-children"><a href="UISystem.UIButton.html">UIButton</a></div><div class="sidebar-section-children"><a href="UISystem.UICheckbox.html">UICheckbox</a></div><div class="sidebar-section-children"><a href="UISystem.UIObject.html">UIObject</a></div><div class="sidebar-section-children"><a href="UISystem.UIScrollbar.html">UIScrollbar</a></div><div class="sidebar-section-children"><a href="UISystem.UISystemPlugin.html">UISystemPlugin</a></div><div class="sidebar-section-children"><a href="UISystem.UIText.html">UIText</a></div><div class="sidebar-section-children"><a href="UISystem.UITile.html">UITile</a></div><div class="sidebar-section-children"><a href="UISystem.UIVideo.html">UIVideo</a></div><div class="sidebar-section-children"><a href="ZzFXM.ZzFXMusic.html">ZzFXMusic</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-namespaces"><div>Namespaces</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="Audio.html">Audio</a></div><div class="sidebar-section-children"><a href="Box2D.html">Box2D</a></div><div class="sidebar-section-children"><a href="Debug.html">Debug</a></div><div class="sidebar-section-children"><a href="Draw.html">Draw</a></div><div class="sidebar-section-children"><a href="DrawUtilities.html">DrawUtilities</a></div><div class="sidebar-section-children"><a href="Engine.html">Engine</a></div><div class="sidebar-section-children"><a href="Input.html">Input</a></div><div class="sidebar-section-children"><a href="Math.html">Math</a></div><div class="sidebar-section-children"><a href="Medals.html">Medals</a></div><div class="sidebar-section-children"><a href="Newgrounds.html">Newgrounds</a></div><div class="sidebar-section-children"><a href="PostProcess.html">PostProcess</a></div><div class="sidebar-section-children"><a href="Random.html">Random</a></div><div class="sidebar-section-children"><a href="Settings.html">Settings</a></div><div class="sidebar-section-children"><a href="TileLayers.html">TileLayers</a></div><div class="sidebar-section-children"><a href="UISystem.html">UISystem</a></div><div class="sidebar-section-children"><a href="Utilities.html">Utilities</a></div><div class="sidebar-section-children"><a href="WebGL.html">WebGL</a></div><div class="sidebar-section-children"><a href="ZzFXM.html">ZzFXM</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>